<template>
  <div class="box">
<<<<<<< HEAD
      <div class="detailImg">
        <img :src="detail.detailimg" alt="">
        <div class="arrow1">
          <van-icon name="arrow-left" size='20' color='#fff' @click='$router.go(-1)' />
        </div>
        <div class="arrow2">
          <van-icon name="like-o" size='25' :color='staricon==="star" ? "#ff5000" : "#fff"' @click="collection"/>
          <van-icon name="envelop-o" size='25' color='#fff' />
        </div>
      </div>
      <div class="detailnotice">
        <p class="price"><i>折後價</i>{{ detail.price }}</p>
        <p class="wprice">唯品價&nbsp;&nbsp;&nbsp;{{ detail.price }}</p>
        <p style='color:#222'>{{ detail.proname }}</p>
        <p style='color:#98989F'>{{ detail.detail }}</p>
      </div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" @click='chat' />
        <van-goods-action-icon icon="cart-o" text="购物车" @click='$router.push("/cart")'/>
        <van-goods-action-icon :icon="staricon" text="已收藏" color="#ff5000" @click="collection" />
        <van-goods-action-button type="warning" text="加入购物车" @click='addCart'/>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
=======
    <header class="header">
      <van-nav-bar
        title="详情"
        @click-left="$router.go(-1)"
        left-arrow
      >
        <van-icon slot="right" name="ellipsis" />
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="detailBanner">
        <van-image
          width="80%"
          mode="fill"
          :src="proimg"
        />
      </div>
      <div class="price">
        ￥{{ price }}
      </div>
      <h1>{{ proname }}</h1>
      <i>{{ desc }}</i>
      <div v-html="detail"></div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="chat" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
        <van-goods-action-icon :icon="collection" @click="collect" :text="collection === 'star-o' ? '收藏' : '已收藏'" color="#ff5000" />
        <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
  </div>
</template>

<script>
import Vue from 'vue'
<<<<<<< HEAD
import { getdetaillist, cartAdd } from '@/api'
import { Icon, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'

Vue.use(Icon)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)

export default {
  data () {
    return {
      detail: {},
      staricon: 'star-o'
    }
  },
  mounted () {
    // 通过传过来的proid去请求详情的接口拿到相应的数据进行渲染
    const { proid } = this.$route.query
    // 进入页面即可判断有没有改数据 - 取得proid之后
    const arrStr = localStorage.getItem('collection') || '[]'
    const arr = JSON.parse(arrStr)
    const index = arr.indexOf(proid)
    if (index !== -1) { // 查到改数据
      this.staricon = 'star'
    } else { // 未查到数据
      // console.log(222222)
      this.staricon = 'star-o'
    }
    getdetaillist({ proid }).then(res => {
      this.detail = res.data.data
    })
  },
  methods: {
    // 客服
    chat () {},
    // 加入购物车
    addCart () {
      // 加入购物车逻辑为必须要登录才能加入，因为要知道是谁加了哪件商品至购物车
      // 所以需要知道用户得id和商品的id去请求数据，用户得id又要传token值去验证登录，当然有数量也要传数量过去
      const userid = localStorage.getItem('userid')
      const proid = localStorage.getItem('proid')
      if (localStorage.getItem('loginState') === 'ok') {
        // 请求加入购物车的逻辑
        cartAdd({ userid, proid }).then(res => {
          console.log(res)
        })
      } else {
        this.$router.push('/login')
      }
    },
    // 加入收藏
    collection () {
      // 从本地取到存收藏数据的集合，如果没有就新建一个，因为本地存的是字符串，所以新建是也是字符窜
      const arrStr = localStorage.getItem('collection') || '[]'
      const arr = JSON.parse(arrStr)
      // 拿到本次详情页商品的id
      const { proid } = this.$route.query
      // 把此次id存进收藏集合之前需判断之前是否存在，存在点击则表示取消收藏，不存在点击则存进去
      const index = arr.indexOf(proid) // 数组的indexOf方法，如存在则返回下标，不存在则返回-1
      if (index !== -1) {
        // 表示存在,则删除这一项
        arr.splice(index, 1)
        // 使徽标颜色变未点击
        this.staricon = 'star-o'
      } else {
        arr.push(proid)
        this.staricon = 'star'
      }
      localStorage.setItem('collection', JSON.stringify(arr))
=======
import { getDetailData, addCart } from '@/api'
import { Image, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Icon, Toast } from 'vant'
Vue.use(Image)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Toast)
export default {
  data () {
    return {
      proid: '',
      type: '',
      brand: '',
      brandimg: '',
      proname: '',
      rating: 0,
      sales: 0,
      stock: 0,
      price: 0,
      flag: 1,
      proimg: '',
      desc: '',
      detail: '',
      collection: 'star-o'
    }
  },
  mounted () {
    console.log(this.$route.params)
    const { proid } = this.$route.params
    this.proid = proid
    // 进入页面即可判断有没有该数据
    const arrStr = localStorage.getItem('collection')
    const arr = JSON.parse(arrStr)
    const index = arr.indexOf(this.proid)
    if (index !== -1) {
      this.collection = 'star'
    } else {
      this.collection = 'star-o'
    }
    // 请求数据
    getDetailData({ proid }).then(res => {
      console.log(res)
      const { proid, type, brand, proname, rating, sales, stock, price, proimg, desc, detail } = res.data.data
      // 修改状态
      this.proid = proid
      this.type = type
      this.brand = brand
      this.proname = proname
      this.rating = rating
      this.sales = sales
      this.stock = stock
      this.price = price
      this.proimg = proimg
      this.desc = desc
      this.detail = '<mark style="color: #f66">' + detail + '</mark>'
    })
  },
  methods: {
    chat () {
      window._MEIQIA('withoutBtn')
      window._MEIQIA('init')
      window._MEIQIA('allSet', function () {
        window._MEIQIA('showPanel')
        // 先从服务器获取可以传递的用户信息，执行以下步骤，获取用户信息
        window._MEIQIA('metadata', {
          name: '探花',
          tel: '19834099753',
          email: '916593961@qq.com',
          qq: 916593961,
          age: 24
        })
      })
    },
    collect () {
      // 本地会存储一个数组，数组的元素就是收藏的每一个产品id
      const arrStr = localStorage.getItem('collection') || '[]'
      const arr = JSON.parse(arrStr)
      // 判断 arr中有没有该产品id，如果有则删除，如果没有则加入
      const index = arr.indexOf(this.proid)
      if (index !== -1) {
        arr.splice(index, 1)
        this.collection = 'star-o'
      } else {
        arr.push(this.proid)
        this.collection = 'star'
      }
      localStorage.setItem('collection', JSON.stringify(arr))
    },
    addCart () {
      // 判断用户是不是登陆状态
      if (localStorage.getItem('loginState') === 'ok') {
        // 登录
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          const { code } = res.data
          if (code === '200') {
            Toast('加入购物车成功')
          } else if (code === '10101') {
            Toast('加入失败')
          }
        })
      } else {
        // 未登录
        this.$router.push('/login')
      }
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
    }
  }
}
</script>
<<<<<<< HEAD

<style lang="scss">
.detailImg{
  position: relative;
  width: 375px;
  height: 375px;
  img{
    width: 100%;
    height: 100%;
  }
  .arrow1{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    display: flex;
    top: 8px;
    left: 10px;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
  }
  .arrow2{
    width: 83px;
    height: 32px;
    border-radius: 10%;
    position: absolute;
    z-index: 1;
    display: flex;
    top: 8px;
    right: 10px;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
  }
}
.detailnotice{
  width: 100%;
  height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p{
    width: 345px;
    display: flex;
    align-items: center;
  }
  .price{
    font-size: 25px;
    i{
      display: inline-block;
      width: 44px;
      height:19px;
      border-radius: 20%;
      font-size: 12px;
      text-align: center;
      line-height: 19px;
      color:#fff;
      background-color: #de3d96;
      margin-right: 5px;
    }
  }
  .wprice{
    font-size: 14px;
    color:#98989F;
    margin-bottom: 8px;
  }
}
=======
<style lang="scss" scoped>
.content {
  padding: 0 10px;
}
.detailBanner {
  .van-image {
    margin: 0 10%;
  }
}
.price {
  color: #f66;
  font-size: 18px;
  font-weight: bold;
}
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
</style>
